import React, {Component} from 'react';
import {Drawer,Tabs,Timeline} from 'antd';
import { DownOutlined } from '@ant-design/icons';

import styles from './styles.less';
const { TabPane } = Tabs;


export default class BusRoute extends Component {
    state = {
        data:[]
    };
    static getDerivedStateFromProps(nextProps, prevState) {
        const { visible,data } = nextProps;
        console.log(data,"data");
        if (visible !== prevState.visible) {
            return {
                visible,
            };
        }
        if (data !== prevState.data) {
            return {
                data,
            };
        }
        return null;
    }

    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    handleLocationTransform = ()=>{
        const {data,endLocationText} = this.state;
        this.setState({
            data: data[0].children.reverse(),
        });
    }
    render() {
        const {visible,data,endLocationText,startLocationText} = this.state;
        const {onClose,value} = this.props;
        return (
            <div className={styles.busRoute}>
                <Drawer
                    title={<div style={{color:'#393284',fontSize:24,fontWeight:600}}>巴士路線</div>}
                    placement="left"
                    mask={false}
                    onClose={onClose}
                    visible={visible}
                    getContainer={false}
                    width={350}
                    style={{ position: 'absolute' }}
                    headerStyle={{ borderBottom: 'none'}}
                >
                    <div className={styles.busRouteHeader}>
                        <div className={styles.busRouteName}>{value}</div>
                        <div className={styles.busRoutese}>
                            <span>{data[0]&&data[0].children[0].busstop}</span>
                            <div>
                                <img src={require('./image/bus-stop_time_triangle_double.png')} alt=""/>
                            </div>
                            <span>{data[0]&&data[0].children[data[0].children.length-1].busstop}</span>
                        </div>
                        <img className={styles.transform} onClick={()=>this.handleLocationTransform()} src={require('./image/p2pExchange.png')} alt=""/>
                    </div>
                    <Tabs defaultActiveKey="2" tabBarGutter={20} centered>
                        <TabPane tab="乘客資訊" key="1">
                            <div className={styles.information}>
                                <h1>路線最新消息</h1>
                                <ul>
                                    <li>長樂街巴士站暫時遷移</li>
                                    <li>臨時班次調整</li>
                                </ul>
                            </div>
                        </TabPane>
                        <TabPane tab="路線及收費" key="2">
                            <div style={{position: 'relative'}}>
                                <div className={styles.routeCharge}>
                                    <Timeline mode='left' style={{width:'86%'}}>
                                        {
                                            data[0]&&data[0].children.map((item,index)=><Timeline.Item label={index===0?<span style={{fontSize:'11pt',color:'#2a628c'}}>路線開出</span>:index===data[0].children.length-1?<span style={{fontSize:'11pt',color:'#7f337d'}}>路線終點</span>:''}><span className={styles.busstopTimeline}>{item.busstop}</span></Timeline.Item>)
                                        }
                                    </Timeline>
                                </div>
                                <div className={styles.routeprice}>
                                    $4.9
                                </div>
                            </div>
                        </TabPane>
                        <TabPane tab="時間表" key="3">
                            <div className={styles.timetable}>
                                <h1>由 竹園 出發 往 尖沙咀碼頭</h1>
                                <div className={styles.timetableTit}>星期一至五</div>
                                <div className={styles.timetableCon}>
                                    <div>
                                        <div className={styles.timetableContit}>時間</div>
                                        <div>06:15</div>
                                        <img src={require('./image/bus-stop_time_triangle_double.png')} alt=""/>
                                        <div>00:15</div>
                                    </div>
                                    <div>
                                        <div className={styles.timetableContit}>班次(分鐘)</div>
                                        <div>15-20</div>
                                    </div>
                                </div>
                                <div className={styles.timetableTit}>星期六</div>
                                <div className={styles.timetableCon}>
                                    <div>
                                        <div className={styles.timetableContit}>時間</div>
                                        <div>06:15</div>
                                        <img src={require('./image/bus-stop_time_triangle_double.png')} alt=""/>
                                        <div>00:15</div>
                                    </div>
                                    <div>
                                        <div className={styles.timetableContit}>班次(分鐘)</div>
                                        <div>15-20</div>
                                    </div>
                                </div>
                                <div className={styles.timetableTit} style={{backgroundColor: 'rgba(206, 99, 60, 0.12)'}}>星期日及公眾假期</div>
                                <div className={styles.timetableCon}>
                                    <div>
                                        <div className={styles.timetableContit}>時間</div>
                                        <div>06:15</div>
                                        <img src={require('./image/bus-stop_time_triangle_double.png')} alt=""/>
                                        <div>00:15</div>
                                    </div>
                                    <div>
                                        <div className={styles.timetableContit}>班次(分鐘)</div>
                                        <div>15-20</div>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>
                </Drawer>
            </div>
        );
    }
}
